<template>
	<div class="treeWrap">
		<div class="head" v-if="title">
			<span class="title">{{ title }}</span>
			<CloseOutlined class="close" @click.native="handleClose"></CloseOutlined>
		</div>
		<StatusTip v-if="pageTip.show" :status="pageTip.status"></StatusTip>
		<template v-else>
			<a-input v-model:value="inputValue" placeholder="搜索摄像头" @pressEnter="handlePressEnter" />
			<a-tree
				showLine
				:checkable="true"
				:expandedKeys="expandedKeys"
				:selectedKeys="selectedKeys"
				:checkedKeys="checkedKeys"
				:autoExpandParent="autoExpandParent"
				:treeData="treeSource"
				@expand="handleExpand"
				@select="handleSelect"
				@check="handleCheck"
				:fieldNames="{ title: `${name}`, key: `${id}`, children: `${children}` }"
			>
				<template #title="item">
					<span class="name" v-if="searchValue && item[name].indexOf(searchValue) != -1">
						{{ item[name].substr(0, item[name].indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span
						>{{ item[name].substr(item[name].indexOf(searchValue) + searchValue.length) }}
					</span>
					<span class="name" v-else>{{ item[name] }}</span>
				</template>
			</a-tree>
		</template>
	</div>
</template>

<script setup name="tree">
import StatusTip from '@/components/StatusTip/index.vue';
import res from './data';
import { ref, reactive, watch, onMounted } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';
const props = defineProps({
	treeData: Array,
	name: String,
	id: String,
	children: String,
	parentId: String,
	title: String
});
const emit = defineEmits(['onChecked', 'onSelected', 'onClose']);
const pageTip = reactive({
	show: true,
	status: 0
});
const treeSource = ref([]);
const autoExpandParent = ref(true);
const expandedKeys = ref([]);
const checkedKeys = ref([]);
const selectedKeys = ref([]);
const inputValue = ref('');
const searchValue = ref('');

/** */
const handleExpand = (keys, { expanded, node }) => {
	let key = node[props.id];
	expand(key);
};
/** */
const handleSelect = (keys, { node }) => {
	if (node[props.children]) {
		expand(node[props.id]);
	} else {
		selectedKeys.value = [...keys];
		emit('onSelected', keys);
	}
};
/** */
const handleCheck = (keys, { checked, checkedNodes }) => {
	checkedKeys.value = keys;
	emit('onChecked', keys);
};
/** 去掉祖先级的key */
const delParentKey = (key, data, checkedData) => {
	let parentKey = byKeyFindParentKey(key, data, props.id, props.children);
	parentKey.forEach(item => {
		let findIndex = checkedData.findIndex(fItem => fItem[props.id] == item[props.id]);
		if (findIndex != -1) {
			checkedData.splice(findIndex, 1);
		}
	});
	return checkedData;
};
/** 通过key递归出它的祖先 */
function byKeyFindParentKey(id, data, idKey, childrenKey) {
	const result = [];
	for (let i = 0, len = data.length; i < len; i++) {
		let item = data[i];
		if (item[idKey] == id) {
			return true;
		} else {
			if (item[childrenKey]?.length) {
				let obj = byKeyFindParentKey(id, item[childrenKey]);
				if (typeof obj === 'boolean') {
					return [...result, item[idKey]];
				} else if (obj?.length) {
					return [item[idKey], ...obj];
				}
			}
		}
	}
	return result;
}
/** */
const expand = key => {
	const data = [...expandedKeys.value];
	let findIndex = data.findIndex(item => item == key);
	if (findIndex == -1) {
		data.push(key);
		expandedKeys.value = data;
	} else {
		data.splice(findIndex, 1);
		expandedKeys.value = data;
	}
};
/** */
const handlePressEnter = () => {
	searchValue.value = inputValue.value;
};
/** */
const execute = data => {
	treeSource.value = data;
	expandedKeys.value = data.map(item => item[props.id]);
	pageTip.show = false;
};
/** */
const handleClose = () => {
	emit('onClose');
};
if (props.treeData?.length) {
	execute(props.treeData);
} else {
	setTimeout(() => {
		pageTip.show = true;
		let { code, data } = res;
		if (code == 200) {
			if (data?.length) {
				execute(data);
			} else {
				pageTip.status = 1;
			}
		} else {
			pageTip.status = 2;
		}
	}, 0);
}
</script>
<style lang="less" scoped>
@gap: 16px;
.treeWrap {
	padding: 16px @gap;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	box-shadow: -1px 0px 4px rgba(0, 0, 0, 0.1);
	.head {
		height: 28px;
		margin: 0 -16px 10px;
		line-height: 16px;
		display: flex;
		padding: 0 12px 12px;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ececec;
		.title {
			font-weight: 500;
			font-size: 16px;
			line-height: 24px;
		}
		.close {
			cursor: pointer;
		}
	}
	:deep(.ant-input) {
		background: #f2f3f5;
		border-radius: 4px;
		border: none;
		box-shadow: none;
		margin-bottom: 20px;
		height: 32px;
	}
	// :deep(.ant-tree) {
	// 	flex: 1;
	// 	overflow: overlay;
	// 	margin: 0 -@gap;
	// 	.ant-tree-treenode-selected {
	// 		width: 100%;
	// 		color: #146aff;
	// 		background: rgba(20, 106, 255, 0.08);
	// 	}
	// 	.ant-tree-switcher {
	// 		padding-top: 5px;
	// 	}
	// 	.ant-tree-treenode {
	// 		padding: 0;
	// 	}
	// 	.ant-tree-node-content-wrapper {
	// 		&:hover {
	// 			background-color: transparent;
	// 		}
	// 		&.ant-tree-node-selected {
	// 			background-color: transparent;
	// 		}
	// 	}
	// 	.ant-tree-indent-unit {
	// 		width: 0;
	// 	}
	// }
	:deep(.ant-tree) {
		.ant-tree-switcher-noop {
			visibility: hidden;
		}
	}
	.name {
		display: block;
		// white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 196px;
		// padding: 5px 0;
	}
}
</style>
